<script setup lang="ts">
import { ref, onMounted,nextTick, watch, toRaw, reactive } from 'vue'
import { useRouter } from "vue-router";
import { TeamOutlined, ArrowUpOutlined, FormOutlined, SoundOutlined, PictureOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { teachUpdate } from '../../stores/api/login'
import { teachInfo } from '../../stores/api/home'
import type { UploadProps } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import type { UnwrapRef } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import {upload} from '../../utils/upload' // 引入js
// defineProps<{ msg: string }>()
// const props:any = defineProps({
//     // 触发滚动的容器
//     isShowUpdate: {
//       type: [Boolean],
//       default: false
//     },
//     info: {
//         type: [Object],
//         default: {}
//     }
// })
// const emits = defineEmits(['backUpdateChange', 'backUpdateSuccess'])
const router:any = useRouter()
const fileList = ref([]);
const uploading = ref<boolean>(false);
const imageUrl = ref<string>('');
const info = ref({})

interface FormState {
  nick_name: string;
  mobile: string;
  intro:string;
  avatar: string | undefined;
}
const formRef = ref();
const labelCol = { span: 5 };
const wrapperCol = { span: 24 };
const formState: UnwrapRef<FormState> = reactive({
  nick_name: '',
  mobile: '',
  intro: '',
  avatar: '',
});
const rules: Record<string, Rule[]> = {
  nick_name: [
    { required: true, message: '请输入昵称', trigger: 'change' },
  ],
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'change' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确' }
  ],
};
// 获取用户信息
const getTeachInfo = () => {
  teachInfo({}, 'post').then((res: any) => {
        if (res.code == 200) { 
            info.value = res.data
            formState.nick_name = res.data.name
            formState.mobile = res.data.mobile
            formState.intro = res.data.intro
            formState.avatar = res.data.thumbnail
            imageUrl.value = res.data.thumbnail
        }
    }).catch((err: any) => {
        console.log(err)
    })
}
// 提交
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState));
       createInfo()
    })
    .catch(error => {
      console.log('error', error);
    });
};
// 取消
const resetForm = () => {
  formRef.value.resetFields();
  imageUrl.value = ''
//   emits("backUpdateChange", { isShowUpdate: false});
  router.go(-1)
};

// 调用创建直播间接口
const createInfo = () => {
    let obj = {
        "avatar": formState.avatar,
        "intro": formState.intro,
        "mobile": formState.mobile,
        "nick_name": formState.nick_name
    }
    console.log(obj)
    teachUpdate(obj, 'post').then((res: any) => {
        console.log(res)
        if(res.code == 200) {
            message.success('修改成功');
            // emits("backUpdateSuccess", { isShowUpdate: false});
            formRef.value.resetFields();
            imageUrl.value = ''
            router.go(-1)
        } else {
            message.error(res.message);
        }
    }).catch((err: any) => {
        console.log(err)
    })
}

// 图片上传--删除
const handleRemove: UploadProps['onRemove'] = file => {
  const index = fileList.value.indexOf(file);
  const newFileList = fileList.value.slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
  imageUrl.value = ''
};
// 图片上传之前
const beforeUpload: UploadProps['beforeUpload'] = file => {
  fileList.value = [...(fileList.value || []), file];
  console.log(fileList.value)
  return true;
};
// 图片上传
const handleUpload = (data) => {
  uploading.value = true;
  console.log(fileList.value, data,'handleUpload')
  upload(data.file,res => {
      console.log(res,'ddddd')
      if(res) {
            const startIndex = res.indexOf('/') + 1;
            const urls = res.substring(startIndex);
            formState.avatar = urls
            imageUrl.value = urls
            console.log(urls)
      }
      uploading.value = false;
  })
};
// 监听消息
// watch(() => props.info, (newVal:any, oldValue) => {
//    console.log('infoData',newVal, oldValue)
//    formState.nick_name = newVal.name
//    formState.mobile = newVal.mobile
//    formState.intro = newVal.intro
//    formState.avatar = newVal.thumbnail
//    imageUrl.value = newVal.thumbnail
// })
onMounted(() => {
    getTeachInfo()
});
</script>

<template>
  <div class="start-live-room">
    <a-card class="top-content-p" title="修改资料" style="width: 100%">
        <div class="live-left">
            <a-form
                ref="formRef"
                :model="formState"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
                <a-form-item ref="nick_name" label="昵称" name="nick_name">
                      <a-input v-model:value="formState.nick_name" class="input-item-dd" placeholder="请输入昵称" />
                </a-form-item>
                <a-form-item ref="mobile" label="手机号" name="mobile">
                      <a-input v-model:value="formState.mobile" class="input-item-dd" placeholder="请输入手机号" />
                </a-form-item>
                <a-form-item label="头像" name="avatar">
                    <a-upload  class="cover-g" name="avatar" list-type="picture-card" :show-upload-list="false" :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove" :customRequest="handleUpload">
                        <!-- <img v-if="imageUrl" :src="imageUrl" alt="" /> -->
                        <div v-if="imageUrl" class="cover-image">
                            <img v-if="imageUrl" :src="imageUrl" alt="" />
                        </div>
                        <div v-else>
                            <loading-outlined v-if="uploading"></loading-outlined>
                            <PictureOutlined v-else :style="{fontSize: '22px'}" />
                            <div class="ant-upload-text">上传头像</div>
                        </div>
                    </a-upload>
                </a-form-item>
                <a-form-item label="简介">
                    <a-textarea v-model:value="formState.intro" placeholder="请输入简介" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 24, offset: 4 }" style="text-align: center;">
                    <a-button class="btn-ss" type="primary" @click="onSubmit">提 交</a-button>
                    <a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
                </a-form-item>
            </a-form>
        </div>
    </a-card>
    <!-- <a-modal v-model:open="props.isShowUpdate" title="修改资料" ok-text="提 交" cancel-text="取 消" @cancel="resetForm" :footer="null">
        <div class="live-left">
            <a-form
                ref="formRef"
                :model="formState"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
                <a-form-item ref="nick_name" label="昵称" name="nick_name">
                      <a-input v-model:value="formState.nick_name" class="input-item-dd" placeholder="请输入昵称" />
                </a-form-item>
                <a-form-item ref="mobile" label="手机号" name="mobile">
                      <a-input v-model:value="formState.mobile" class="input-item-dd" placeholder="请输入手机号" />
                </a-form-item>
                <a-form-item label="头像" name="avatar">
                    <a-upload  class="cover-g" name="avatar" list-type="picture-card" :show-upload-list="false" :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove" :customRequest="handleUpload">
                        <div v-if="imageUrl" class="cover-image">
                            <img v-if="imageUrl" :src="imageUrl" alt="" />
                        </div>
                        <div v-else>
                            <loading-outlined v-if="uploading"></loading-outlined>
                            <PictureOutlined v-else :style="{fontSize: '22px'}" />
                            <div class="ant-upload-text">上传头像</div>
                        </div>
                    </a-upload>
                </a-form-item>
                <a-form-item label="简介">
                    <a-textarea v-model:value="formState.intro" placeholder="请输入简介" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 24, offset: 4 }" style="text-align: right;">
                    <a-button class="btn-ss" type="primary" @click="onSubmit">提 交</a-button>
                    <a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
                </a-form-item>
            </a-form>
        </div>
    </a-modal> -->
  </div>
</template>

<style scoped>
.start-live-room{
   display: flex;
   color: #333;
   /* background-color: rgba(22,24,35,1); */
}
.live-left{
   flex: 3;
   /* height: 93vh; */
   /* position: relative; */
   width: 40%;
   margin: auto;
   overflow: hidden;
   padding:0 15px;
}
.live-video{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保视频撑满父容器 */
}
.basic-info{
    display: flex;
    color: #999;
}
.cover-img{
    width: 50px;
    border-radius: 8px;
}
.cover-g{
    /* background-color: rgb(51,52,63); */
    width: 130px;
    height: 132px;
    line-height: 26px;
    text-align: center;
    padding: 10px 0;
    border-radius: 10px;
}
.cover-image{
    width: 100%;
    height: 100%;
}
.cover-image img{
    width: 100%;
    height: 100%;
}
.input-item-dd{
    /* height: 30px; */
    /* padding-top: 0; */
    /* background-color: transparent; */
    font-size: 14px; /* 占位符字体大小 */
    /* border:none; */
    /* outline: none; */
    color: #000;
}
.input-item-dd::placeholder {
  font-size: 14px; /* 占位符字体大小 */
  color: #999; /* 占位符字体颜色 */
}
.type-item{
  padding-left:10px;
  margin-top: 20px;
}
.type-s{
    padding: 5px 15px;
    margin-right: 10px;
    border-radius: 10px;
    cursor: pointer;
}
.active{
    background-color: rgb(51,52,63);
}

.positin-boottom{
    position: absolute;
    bottom: 10px;
    width: 94%;
}
.bottom-item-a{
    width:100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #fff;
   background-color: #080808;
   padding: 8px 15px;
   border-radius: 10px;
}
.btn-ss{
    background-color: #fe5d26;
    height: 34px;
}
.btn-ss:hover{
    background-color: #fe5d26;
}
.live-right{
    color: #fff;
   flex:1;
   position:relative;
   /* background-color: rgb(37,38,50); */
   padding-right: 15px;
}
.live-right-list{
    background-color: rgb(51,52,63);
    padding: 10px 20px;
    height: 22vh;
    border-radius: 10px;
    overflow-y: auto;
}
.live-item{
   display: flex;
   align-items: center;
   justify-content: center;
   color: #898687;
   margin-top: 10px;
}
.live-num{
    line-height: 30px;
    margin-bottom: 20px;
}
.ranking{
    margin-right: 30px;
}
.nick-name{
    margin:0 20px 0 10px;
}
.img-avatar{
    width: 35px;
    height: 35px;
    border-radius: 50%;
}
.grade{
    width: 30px;
}

.live-message{
    padding: 10px 20px;
    background-color: rgb(37,38,50);
    height: 70vh;
    overflow-y: auto;
}
.msg-item{
    display: flex;
    align-items: flex-start;
    margin-top: 8px;
}
.msg-grade{
    width: 40px;
}
.name{
 color: #8ce7ff;
 margin:0 10px;
}
.msg-content{
    line-height: 25px;
}
.bottom-contt{
    position: absolute;
    bottom: 0;
    width: 100%;
    /* background-color: rgb(37,38,50); */
}
.bottom-send{
    display: flex;
    align-items: center;
    color: #fff;
    background-color: rgb(65,66,76);
    margin: 10px 15px 10px 0;
    padding: 8px;
    border-radius: 10px;
}
.send-input{
    background-color: rgb(65,66,76);
    font-size: 16px; /* 占位符字体大小 */
    border:none;
    color: #fff;
}
.send-input::placeholder {
  font-size: 14px; /* 占位符字体大小 */
  color: #999; /* 占位符字体颜色 */
}
.read-the-docs {
  color: #888;
}
</style>